<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}首页{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/global.css' %}">
    <link rel="stylesheet" href="{% static 'css/jquery.pagination.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/bootstrap337/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugin/font-awesome470/css/font-awesome.min.css' %}">
    {% block css %}{% endblock %}
</head>
<style>
    body {
        background-image: url('{% static "img/bg.jpg" %}');
        background-size: auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
</style>
<body>
<div id="app">
    <!-- 头部导航-->
    <nav class="navbar navbar-default me-bg">
        <div class="container">
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a class="logo" href="#">图片</a>
                    </li>
                    <li class="me-active">
                        <a href="{% url 'web:index' %}"><i class="fa fa-home"></i> 首页</a>
                    </li>
                    <li>
                        <a href="{% url 'web:category' %}"><i class="fa fa-lightbulb-o"></i> 分类</a>
                    </li>
                    <li>
                        <a href="{% url 'web:tag' %}"><i class="fa fa-tags"></i> 标签</a>
                    </li>
                    <li>
                        <a href="{% url 'web:file' %}"><i class="fa fa-book"></i> 归档</a>
                    </li>
                    <li>
                        <a href="{% url 'web:about' %}"><i class="fa fa-user"></i> 关于我</a>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="输入搜索内容">
                    </div>
                    <button type="submit" class="btn btn-default"><i class="fa fa-search"></i> 搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-bug"></i> 帮助</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--内容-->
    <div class="container main">
        {% block content %}
        <div class="row">
            <div class="col-lg-8 art-lists">
                <div class="me-head me-flex-b">
                    <span>文章</span>
                    <div class="art-count">
                        共<span> 10 </span>篇文章
                    </div>
                </div>
                <div class="lists">
                    {% for item in art_list %}
                    <div class="item">
                        <div class="row">
                            <div class="col-md-7 me-col">
                                <div class="item-title">
                                    <h4><a href="{% url 'web:article_detail' aid=item.id %}">{{ item.title }}</a></h4>
                                </div>
                                <div class="item-desc">
                                    <p>{{ item.desc }}</p>
                                </div>
                                <div class="item-info me-flex-b">
                                    <div class="item-info-l">
                                        <ul class="me-flex-l">
                                            <li class="me-flex-b">
                                                <img src="{{ item.author.avatar.url }}" alt="" height="20" width="20"/>
                                                <span>{{ item.author.author_name }}</span>
                                            </li>
                                            <li>
                                                <span><i class="fa fa-calendar"></i> {{ item.create_time }}</span>
                                            </li>
                                            <li>
                                                <span title="这么多人在这里一看究竟了ღゝ◡╹)ノ♡"  class="me-hover"><i class="fa fa-eye"></i> {{ item.view_count }}</span>
                                            </li>
                                            <li>
                                                <span title="很高兴能它对你有所帮助ღゝ◡╹)ノ♡" class="me-hover"><i
                                                        class="fa fa-thumbs-up"></i> {{ item.up }}</span>
                                            </li>
                                            <li>
                                                <span title="好吧,我会继续努力的ღゝ◡╹)ノ♡" class="me-hover"><i
                                                        class="fa fa-thumbs-down"></i> {{ item.down }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="item-info-r">
                                        <button type="button" class="btn btn-xs btn-success" style="margin-bottom: 10px;">{{ item.category }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <img src="{{ item.img_url.url }}" alt="" width="200">
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="pagination" style="text-align: center;width:100%;">
                    <div id="pagination" class="page"></div>
                </div>
            </div>
            <div class="col-lg-3 art-navs">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><a href="#"><i class="fa fa-lightbulb-o"></i> 分类</a></h3>
                    </div>
                    <div class="panel-body">
                        {% for item in cate_list %}
                        <p class="me-flex-b">
                            <a href="#">{{ item.cate_name }}</a>
                            <span>{{ item.articles.count }}</span>
                        </p>
                        {% endfor %}
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><a href="#"><i class="fa fa-bookmark"></i> 标签</a></h3>
                    </div>
                    <div class="panel-body">
                        {% for item in tag_list %}
                        <span class="tag"><a href="#">{{ item.tag_name }}</a> {{ item.articles.count }}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><a href="#"><i class="fa fa-medkit"></i> 最新</a></h3>
                    </div>
                    <div class="panel-body">
                        {% for item in top10 %}
                        <p><a href="#">{{ item.title }}</a></p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endblock %}
    </div>
    <!--底部-->
    <div class="footer">
        <div class="container-fluid">
            <div class="bottom-box">
                <p>running : 119 d 7 h 8 m 44 <span>sღゝ◡╹)ノ♡</span></p>
                <p>Copyright © 2020 ￣□￣ Powered by .NET Core on Kubernetes</p>
            </div>
        </div>
    </div>
</div>
</body>
<!---vue-->
<script type="text/javascript" src="{% static 'plugin/vue-2.5.16.js' %}"></script>
<script type="text/javascript" src="{% static 'plugin/axios-0.18.0.min.js' %}"></script>
<!--jquery-->
<script type="text/javascript" src="{% static 'plugin/jquery-1.12.4.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/host.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script type="text/javascript" src="{% static 'js/index.js' %}"></script>
<script type="text/javascript" src="{% static 'plugin/jquery.pagination.min.js' %}"></script>
<script type="text/javascript" src="{% static 'plugin/bootstrap337/js/bootstrap.js' %}"></script>
<script>
    $(function () {
        // var pageNum = {{ page_num }}
        // var pageSize = {{ page_size }}
        // var totalPage = {{ total_page }}
        paginator();
    });

    function paginator() {
        $('#pagination').pagination({
            currentPage: 1,
            totalPage: 10,
            callback:function (current) {
                // location.href = '/?page_size=' + pageSize + '&page_num='+current;
            }
        });
    }
</script>
{% block js %}{% endblock %}
</html>